<template>
   <div class="article-box">
     <el-table
       :data="articles"
       style="width: 100%">
       <el-table-column
         type="selection"
         width="55">
       </el-table-column>
       <el-table-column
         prop="title"
         label="设备编号"
         width="480">
       </el-table-column>
       <el-table-column
         prop="author"
         label="设备管理员"
         width="280">
       </el-table-column>
       <el-table-column
         sortable
         prop="date"
         label="设备投放日期"
         width="280">
       </el-table-column>
       <el-table-column
         label="是否在线">
         <template slot-scope="scope">
           {{ scope.row.status ? '在线' : '离线' }}
         </template>
       </el-table-column>
       <el-table-column label="操作" fixed="right" width="150">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="success"
             plain
             @click="handleEdit(scope.$index, scope.row)">操作</el-button>
           
         </template>
       </el-table-column>
       


     </el-table>
     <el-pagination
       background
       :page-sizes="[10, 20, 30, 50]"
       :page-size="10"
       layout="total, sizes, prev, pager, next, jumper"
       :total="42">
     </el-pagination>
     <el-dialog title="详情" :visible.sync="articleFormVisible" top="10vh" @close="resetForm('articleForm')">
       <el-form :model="article" ref="articleForm" :rules="rules">
         <el-form-item label="设备编号" prop="title" label-width="100px">
           <el-input v-model="article.title" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="设备管理员" label-width="100px">
           <el-input v-model="article.author" autocomplete="off"></el-input>
            
         </el-form-item>
         <el-form-item label="设备投放日期" label-width="100px">
           <el-date-picker
             v-model="article.date"
             type="date"
             value-format="yyyy-MM-dd"
             placeholder="选择日期">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="设备位置" label-width="100px">
          吉林省长春市宽城区人民大街926号一期
         </el-form-item>
         <el-form-item label="在线状态" label-width="100px">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item >
        <el-form-item label="重启" label-width="100px">
          <el-button type="warning">重新启动</el-button>
         </el-form-item>

         <el-form-item label="定时关机时间" label-width="100px">
           <el-date-picker
             v-model="article.date"
             type="datetime"
             placeholder="选择日期时间">
           </el-date-picker>
         </el-form-item>


         <el-form-item>
           <quill-editor ref="TextEditor"
               v-model="article.content"
               :options="editorOption">
           </quill-editor>
         </el-form-item>
        


       </el-form>
       <div slot="footer" class="dialog-footer">
         <!-- <el-button @click="articleFormVisible = false" type="danger">拒 审</el-button> -->
         <el-button type="success" @click="editArticle('articleForm')">保存</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 // 引入富文本编辑器所需样式
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 
 import { quillEditor } from 'vue-quill-editor'
 export default {
   data () {
     return {
      value: true,
       articles: [
         {
           id: '1',
           date: '2022-10-09',
           title: '45623421',
           author: '苏磊',
           content: '本人在2022年10月2日在公司加班时候不幸被作业机器绞入，导致双手受伤，目前还在医院治疗',
           status: 0
         },
         {
           id: '2',
           date: '2022-10-12',
           title: '12445214',
           author: '刘元奇',
           content: '',
           status: 1
         },
         {
           id: '3',
           date: '2022-10-13',
           title: '35256436',
           author: '胡慧虎',
           content: '此设备位于吉林省长春市宽城区人民大街926号一期，主要检测空气质量',
           status: 1
         },
         {
           id: '4',
           date: '2022-10-09',
           title: '32363267',
           author: '唐文正',
           content: '',
           status: 0
         },
         {
           id: '5',
           date: '2022-10-11',
           title: '12679342',
           author: '崔静',
           content: '',
           status: 1
         },
         {
           id: '6',
           date: '2022-10-01',
           title: '14457823',
           author: '张曼曼',
           content: '',
           status: 1
         },
         {
           id: '7',
           date: '2022-10-16',
           title: '21435578',
           author: '蒋梦蝶',
           content: '',
           status: 0
         },
         {
           id: '8',
           date: '2022-10-12',
           title: '12356743',
           author: '何传华',
           content: '',
           status: 0
         },
         {
           id: '9',
           date: '2022-10-15',
           title: '58432478',
           author: '李志豪',
           content: '',
           status: 0
         },
         {
           id: '10',
           date: '2022-10-13',
           title: '34536843',
           author: '尚赵威',
           content: '',
           status: 0
         }
       ],
       article: {
         id: '',
         date: '',
         title: '',
         author: '',
         content: '',
         status: 0
       },
       articleFormVisible: false,
       rowIndex: 9999,
       editorOption: {
         modules: {
           toolbar: [
             ['bold', 'italic', 'underline', 'strike', 'link'],
             ['image', 'clean']
           ]
         },
         placeholder: '请输入文章内容...',
         theme: 'snow'
       },
       rules: {
         title: [
           { required: true, message: '请输入标题', trigger: 'blur' },
           { min: 5, max: 25, message: '长度在 5 到 25 个字符', trigger: 'blur' }
         ]
       }
     }
   },
   components: {
     quillEditor
   },
   mounted () {
 
   },
   methods: {
     getArticles () {
       this.loading = true
       this.$http('/api/articles').then((res) => {
         this.articles = res.data
       }).catch((err) => {
         console.error(err)
       })
     },
     handleEdit (index, row) {
       this.article = Object.assign({}, row)
       this.articleFormVisible = true
       this.rowIndex = index
     },
     editArticle (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.articles.splice(this.rowIndex, 1, this.article)
           this.articleFormVisible = false
           this.$message({
             type: 'success',
             message: '修改成功!'
           })
         }
       })
     },
     handleDelete (index, row) {
       this.$confirm(`确定删除新闻 【${row.title}】 吗?`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         this.articles.splice(index, 1)
         this.$message({
           type: 'success',
           message: '删除成功!'
         })
       }).catch(() => {
         console.log('取消删除')
       })
     },
     resetForm (formName) {
       this.$refs[formName].clearValidate()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
   .article-box {
     width: 100%;
     .el-pagination {
       margin-top: 20px;
     }
     .quill-editor {
       height: 300px;
       margin-bottom: 20px;
     }
   }
 </style>
 